import { reactive, ref, computed, watch } from "vue"
import { defineStore } from "pinia"
import { useQuasar } from "quasar"

export default defineStore("ui", () => {
    const $q = useQuasar()
    const a = reactive({
        侧栏折叠: false,
        dark: $q.cookies.get("theme") == "dark",
    })
    function toggleDark(e) {
        const x = e.clientX
        const y = e.clientY
        const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
        const transition = document.startViewTransition(() => {
            _toggleDark()
        })
        transition.ready.then(() => {
            const isDark = a.dark
            // console.log("开始动画")
            // console.log("isDark", isDark)
            const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
            document.documentElement.animate(
                {
                    clipPath: isDark ? [...clipPath].reverse() : clipPath,
                },
                {
                    duration: 500,
                    easing: "ease-in",
                    pseudoElement: isDark ? "::view-transition-old(root)" : "::view-transition-new(root)",
                }
            )
        })
    }

    function _toggleDark() {
        setHtmlDarkClass设置htmldark类(!$q.dark.isActive)
        
        // 将 a.dark = a.dark === false 这个赋值操作的结果赋给常量 val。
        // 由于赋值操作的结果就是被赋的值，所以 val 的值和更新后 a.dark 的值相同。
        const val = (a.dark = a.dark === false)
        $q.dark.set(val)
        // console.log(`_toggleDark val 👉`, val)
        // console.log(`_toggleDark ing……store.state.value.dark👉`,store.state.value.dark)
        $q.cookies.set("theme", val ? "dark" : "light", { path: "/", sameSite: "Strict" })
    }

    function setHtmlDarkClass设置htmldark类(dark) {
        // console.log("setHtmlDarkClass设置htmldark类  ing")
        // console.log("dark👉", dark)
        const classList = document.querySelector("html").classList
        dark ? classList.add("dark") : classList.remove("dark")
    }

    watch(a, val => {
        // settingStore.SetDarkTheme(val)
        // $q.dark.set(a.dark)
    })
    return {
        a,
        toggleDark,
    }
})
